<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
		ul#list>li{
			float: left;
			border: 1px solid #ccc;
		}
		ul li {
			width: 200px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			list-style: none;
			border: 1px solid #ccc;
			margin-left: -1px;

		}
		.ppap{
			display: none;
		}
	</style>
</head>
<body>
	<ul id="list">
		<li>
			<a href="#">运动品牌</a>
			<ul class="ppap">
				<li>阿迪达斯</li>
				<li>耐克</li>
				<li>新百伦</li>
				<li>CEEO</li>
				<li>哥伦比亚</li>
			</ul>
		</li>
		<li>
			<a href="#">休闲品牌</a>
			<ul class="ppap">
				<li>马克华菲</li>
				<li>太平鸟</li>
				<li>阿尔蓝特</li>
				<li>GXG</li>
				<li>里维斯</li>
			</ul>
		</li>
		<li>
			<a href="#">奢饰品牌</a>
			<ul class="ppap">
				<li>纪梵希</li>
				<li>芬迪</li>
				<li>范思哲</li>
				<li>爱马仕</li>
				<li>阿玛尼</li>
			</ul>
		</li>
	</ul>
	<script src="../JQuery/jquery-1.11.1.js"></script>
	<script>
		$("#list>li").mouseover(function(){
			$(this).find(".ppap").stop().slideDown(200);
		})
		$("#list>li").mouseleave(function(){
			$(this).find(".ppap").stop().slideUp(200);
		})
	</script>
</body>
</html>